/**
 * 主题色混入
 * 提供主题色相关的数据和方法
 */
import { getThemeColorFromGlobal, getThemePrimaryColor } from '@/utils/theme'

export default {
  data() {
    return {
      themeColor: '1', // 主题色值
      primaryColor: '#4A90E2' // 主要颜色
    }
  },
  
  computed: {
    // 主题色样式
    themeColorStyles() {
      return this.setThemeColorVariables()
    }
  },
  
  methods: {
    /**
     * 初始化主题色
     */
    async initThemeColor() {
      try {
        const themeColor = await getThemeColorFromGlobal()
        if (/^\d+$/.test(themeColor)) {
          // 异步获取主题色
          this.themeColor = themeColor
          this.primaryColor = getThemePrimaryColor(themeColor)
        } else {
          // 同步获取主题色（直接使用颜色值）
          this.themeColor = themeColor
          this.primaryColor = themeColor
        }
        console.log('主题色初始化完成:', { themeColor: this.themeColor, primaryColor: this.primaryColor })
      } catch (error) {
        console.error('主题色初始化失败:', error)
        // 使用默认主题色
        this.themeColor = '1'
        this.primaryColor = '#4A90E2'
      }
    },
    
    /**
     * 设置主题色CSS变量
     */
    setThemeColorVariables() {
      const primaryColor = this.primaryColor
      // 将十六进制颜色转换为RGB值
      const rgb = this.hexToRgb(primaryColor)
      
      if (rgb) {
        const styles = {
          primaryColor: primaryColor,
          primaryColorBg: `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, 0.1)`,
          primaryColorBorder: `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, 0.08)`,
          primaryColorShadow: `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, 0.15)`,
          primaryColorDark: `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, 0.8)`
        }
        
        // 在小程序环境中，使用uni.setStorageSync存储主题色变量
        // #ifdef MP
        uni.setStorageSync('themeColorVariables', {
          '--primary-color': primaryColor,
          '--primary-color-bg': styles.primaryColorBg,
          '--primary-color-border': styles.primaryColorBorder,
          '--primary-color-shadow': styles.primaryColorShadow
        })
        // #endif
        
        // 在H5环境中，设置CSS变量
        // #ifdef H5
        if (typeof document !== 'undefined' && document.documentElement) {
          const style = document.documentElement.style
          style.setProperty('--primary-color', primaryColor)
          style.setProperty('--primary-color-bg', styles.primaryColorBg)
          style.setProperty('--primary-color-border', styles.primaryColorBorder)
          style.setProperty('--primary-color-shadow', styles.primaryColorShadow)
        }
        // #endif
        
        return styles
      }
      
      return {
        primaryColor: '#4A90E2',
        primaryColorBg: 'rgba(74, 144, 226, 0.1)',
        primaryColorBorder: 'rgba(74, 144, 226, 0.08)',
        primaryColorShadow: 'rgba(74, 144, 226, 0.15)',
        primaryColorDark: 'rgba(74, 144, 226, 0.8)'
      }
    },
    
    /**
     * 将十六进制颜色转换为RGB值
     * @param {string} hex - 十六进制颜色值
     * @returns {object|null} RGB对象或null
     */
    hexToRgb(hex) {
      const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex)
      return result ? {
        r: parseInt(result[1], 16),
        g: parseInt(result[2], 16),
        b: parseInt(result[3], 16)
      } : null
    }
  }
}